// 此处完成购物车逻辑代码
//1. 先把list里面的数据渲染出来
//2. 能够全选反选同时总价 总购买数量变化
//3. 单个商品数量能够加减 但是有限制 加减的时候小记价格，总价要变化，总购买数量也要变化
//4. 能够删除单个商品，删除的同时 总购买数量和总价要变化
//5. 能够删除选中商品，删除的同时 总购买数量和总价要变化
//6. 能够清空购物车，总数量和总价要对应变化

// console.log(list);  // 将要渲染到页面的数据


let content = document.querySelector(".content");   // 获取主体内容的容器content

let topBox = document.createElement("div"); // 创建div.top元素对象
topBox.classList.add("top");    // 给元素添加样式

let selectAll = document.createElement("input");    // 创建“全选”按钮
selectAll.type = "checkbox";

// 将创建好的元素放到它们对应的父容器中
topBox.append(selectAll);
topBox.append("全选");
content.append(topBox);

let bottomBox = document.createElement("div");  // 创建底部div.bottom元素对象
bottomBox.classList.add("bottom");// 给元素添加样式

bottomBox.innerHTML = `
    <p>总购买数量: <span id="buyCount">1</span></p>
    <p>
        <button class="pay">去结算</button>
        <button class="clear">清空购物车</button>
        <button class="clear_select">删除所有已选中</button>
        <button class="list">返回列表页</button>
    </p>
    <p>总价格 : ￥ <span>100.00</span></p>
`;
content.append(bottomBox);

// 渲染中间部分内容
let ul = document.createElement("ul"); // 创建ul元素
ul.classList.add("center");
let li = null;
list.forEach(function (item, index) {

    function setCheckBox() {
        if (item.select) {
            return "checked"
        } else {
            return '';
        }
    }

    li = document.createElement("li");
    li.innerHTML = `
        <div class="select">
          <input type="checkbox" ${setCheckBox()}>
        </div>
        <div class="pic">
          <img src="${item.pic}" alt="">
        </div>
        <div class="name">
        ${item.name}
        </div>
        <div class="price">
          ￥ <span>${item.price}</span>
        </div>
        <div class="number">
          <button>-</button>
          <input type="text" value="${item.buy_num}">
          <button>+</button>
        </div>
        <div class="subtotal">
          ￥ <span>100.00</span>
        </div>
        <div class="del">
          <button>删除</button>
        </div>
    `;
    ul.append(li);

    li.addEventListener("mouseover",function () {
        this.classList.add("active");
    });
    li.addEventListener("mouseleave",function () {
        this.classList.remove("active");
    });

    // 将click事件 委托 给每个li标签对象
    li.addEventListener("click", function (e) {

        let targetBtn = e.target;  // 被点击的按钮
        let ulis = [...document.querySelectorAll("li")];

        // 选中 按钮点击
        if (targetBtn.tagName === "INPUT" && targetBtn.type === "checkbox") {
            // console.dir(targetBtn);

            calcTotal();
            selectAll.checked = ulis.every(function (uli, index) {
                // console.log(li.firstElementChild.firstElementChild.checked);
                return uli.firstElementChild.firstElementChild.checked;
            });
        };

        // “-”操作 减 按钮
        if (targetBtn.tagName === "BUTTON" && targetBtn.textContent === "-") {
            // console.dir(targetBtn);

            let disNum = targetBtn.nextElementSibling.value;
            if (disNum <= 0) return;
            targetBtn.nextElementSibling.value = --disNum;
            calcTotal();
        };

        // “+”操作 加 按钮
        if (targetBtn.tagName === "BUTTON" && targetBtn.textContent === "+") {
            // console.dir(targetBtn);  Number(`${item.number}`)

            let addNum = targetBtn.previousElementSibling.value;
            if (addNum >= Number(`${item.number}`)) return;
            targetBtn.previousElementSibling.value = ++addNum;
            calcTotal();
        };

        // 删除 按钮
        if (targetBtn.tagName === "BUTTON" && targetBtn.textContent === "删除") {
            targetBtn.parentElement.parentElement.remove();
            delete list[index];
            calcTotal();
            ulis = [...document.querySelectorAll("li")];
            if (ulis.length === 0) {
                selectAll.checked = false;
                selectAll.disabled = true;
            } else {
                selectAll.checked = ulis.every(function (uli, index) {
                    // console.log(li.firstElementChild.firstElementChild.checked);
                    return uli.firstElementChild.firstElementChild.checked;
                });
            }
        }

    });

});
topBox.after(ul);

let totalNumSpan = document.querySelector(".bottom p:first-child > span");  // 获取 底部“总购买数量”的span标签
let totalPriceSpan = document.querySelector(".bottom p:last-child > span"); // 获取 底部“总价格”的span标签

let backListBtn = document.querySelector(".list");  // 返回列表
let toPayBtn = document.querySelector(".pay");      // 去结算

// let lis = [...document.querySelectorAll("li")]; // 每次点击 // 获取li，将li对象放到数组里
// console.dir(lis);

let selectBoxs = [...document.querySelectorAll(".select>input")];    // 获取页面中 选择 按钮

// 全选按钮 监听事件处理
selectAll.addEventListener("click", function (e) {
    
    /* 当全选按钮选中时，下面的全部选中按钮也要选中 */
    selectBoxs.forEach(function (selectBox) {
        selectBox.checked = e.target.checked;
    });
    calcTotal();
});

// 键盘输入购买数量
let buyNumIpts = document.querySelectorAll(".number>input");
buyNumIpts.forEach(function (numIpt) {
    numIpt.addEventListener("blur",function (){
        calcTotal();
    });
});

// 清空购物车
let clearCar = document.querySelector(".bottom .clear");
clearCar.addEventListener("click", function () {
    // console.log(11111);
    let isClear = confirm("是否清空(删除全部)购物车？");

    selectBoxs.forEach(function (selectBox) {
        selectBox.checked = selectAll.checked = true;
        if (isClear) selectBox.parentElement.parentElement.remove();
    });

    if (calcTotal() === 0) {
        selectAll.checked = false;
        selectAll.disabled = true;
    }
});

// 删除所有已选中 的商品
let clearSelect = document.querySelector(".bottom .clear_select");
clearSelect.addEventListener("click", function () {
    let isClear = confirm("是否删除已选的商品？");
    if (!isClear) return;
    selectBoxs.forEach(function (selectBox, index) {
        if (selectBox.checked) {
            selectBox.parentElement.parentElement.remove();
        }
    });

    if (calcTotal() === 0) {
        selectAll.checked = false;
    }

});

// 去结算
toPayBtn.addEventListener("click",function(){
    alert("还没有完成该功能！！！");
});

// 返回列表
backListBtn.addEventListener("click",function(){
    alert("还没有完成该功能！！！");
});

// 计算总购买量、总价格 函数
calcTotal();
function calcTotal() {

    let buyNumIpts = document.querySelectorAll(".number>input");    // 获取页面中显示商品数量的input框
    let subTotals = document.querySelectorAll(".subtotal>span");    // 获取显示每个商品的总价格的span标签
    let prices = document.querySelectorAll(".price>span");          // 获取显示每个商品的单价的span标签

    let totalNum = 0; // 被选中的商品的总数量
    let totalPrice = 0; // 被选中的商品的总价

    buyNumIpts.forEach(function (buyNumIpt, index) {
        // console.log(buyNumIpt.value, index);
        let flag = buyNumIpt.parentElement.parentElement.firstElementChild.firstElementChild.checked;
        // console.log(buyNumIpt, index);
        subTotals[index].textContent = buyNumIpt.value * prices[index].textContent;     // 购买这种商品的数量 所需的价格
        if (flag) {     // 计算被选中的 总商品数量、总的价格
            totalNum += Number(buyNumIpt.value);
            totalPrice += Number(subTotals[index].textContent);
        }

    });

    totalNumSpan.textContent = totalNum;    // 总购买数量
    totalPriceSpan.textContent = totalPrice;    // 总购买数量的总价格

    return totalNum;
}